<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <h1>table</h1>
    <hr>
<table width="800" border="1" cellspacing="0" cellpadding="5" id="tab">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>班期</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>悦悦</td>
        <td>18</td>
        <td>s88</td>
        <td>
            <button onclick="deleteData(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>悦悦</td>
        <td>18</td>
        <td>s88</td>
        <td>
            <button onclick="deleteData(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>悦悦</td>
        <td>18</td>
        <td>s88</td>
        <td>
            <button onclick="deleteData(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>悦悦</td>
        <td>18</td>
        <td>s88</td>
        <td>
            <button onclick="deleteData(this)">删除</button>
        </td>
    </tr>
    
</table>
    
    <hr>
<!-- 在这里 return addDate();的意思就是 将addData()运行完的结果 再向上返回(也就是向obsubmit=?? 返回结果) 如果 下面运行为return false 那么标签里意思就是  onsubmit ="return false" 就是 告诉form表单 这里为false 不需要执行了  如果 这里不加return 结果就变成了 onsubmit="false" 这样只是赋值 不具备判读功能 程序还是会执行 类外 在下面js代码中 必定要返回false, 而turn是可有可无的 通过以下例子加以证明 -->
<form action="1.php" name="myform" onsubmit="return addDate()">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="text" name="grade">
    <button type="submit">提交</button>
</form>
    
    <script>
        function addDate(){
            var name = document.myform.name.value;
            var age = document.myform.age.value;
            var grade = document.myform.grade.value;
            var table = document.getElementById('tab');
            // 给表格添加数据;
            var index = table.rows.length;
            var tr = table.insertRow(index); // 表格对象下的属性 添加一行
            tr.insertCell(0).innerHTML = index;
            tr.insertCell(1).innerHTML = name;
            tr.insertCell(2).innerHTML = age;
            tr.insertCell(3).innerHTML = grade;
            tr.insertCell(4).innerHTML = '<button onclick="deleteData(this)">删除</button>';
            return false;    //返回值 在html标签中就会不刷新

        }


        function deleteData(obj){
            var table = document.getElementById('tab');
                    // 返回的是 所在行的下标名
            var index = obj.parentNode.parentNode.rowIndex;
            table.deleteRow(index);
        }
    </script>


</body>
</html>